<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>李春燕个人主页</title>
        <meta name="description" content="">
        <meta name="author" content="templatemo">
        
        <!--<link href='http://fonts.useso.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.useso.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>-->
        <link href="css/font-awesome.min.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/templatemo-style.css" rel="stylesheet">
        <style>
            .on{
                margin: 0;
                padding: 0;
                list-style: none;
                /*height: 300px;*/
                font-size: 24px;
            }
            #jq:hover{
                color: goldenrod;
                transition: all 0.3s ease;
            }
        </style>
    </head>
    <body>
        <div class="templatemo-container">
            <div class="templatemo-block-left">
                <div class="templatemo-header-left">
                    <div class="templatemo-header-text-wrap">
                        <div class="templatemo-header-text">
                            <h1 class="text-uppercase templatemo-site-name"><span class="gold-text"><b>Luxury</b></span> Gold</h1>
                            <hr class="templatemo-header-hr">
                            <p class="text-uppercase templatemo-slogan">Passion for Fashion</p>
                        </div>
                    </div>
                    <div class="templatemo-header-left-overlay"></div>
                </div>
            </div>
            <div class="templatemo-block-right">
                <div class="templatemo-header-right">
                    <div class="templatemo-header-right-overlay"></div>
                    <div class="mobile-menu-icon">
                        <i class="fa fa-bars"></i>
                    </div>
                </div>
            </div>
        </div> 
        <section class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="text-uppercase">New Project</h2>
                    <hr class="templatemo-section-header-hr">
                    <p class="text-uppercase templatemo-section-subheader">ALL OF MY HOMEWORK AND PROJECT</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
                    <div class="new-arrival-container">
                        <div class="new-arrival-overlay">
                            <h3 class="text-uppercase new-arrival-title">
                                <span class="font-script">Summer</span>
                                <span class="smaller-text">Collection</span>
                            </h3>
                        </div>
                        <img src="img/new-arrival-1.jpg" alt="New Arrival 1" class="img-responsive">
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
                    <div class="new-arrival-container">
                        <div class="new-arrival-overlay">
                            <h3 class="text-uppercase new-arrival-title">
                                <!--<span class="smaller-text bordered-text">Best</span>
                                <span><b>Quality</b></span>-->
                                <a href="jquery-content.html" style="color: white"><span class="font-script" id="jq">jQuery部分练习</span></a>
                            </h3>
                        </div>
                        <img src="img/new-arrival-2.jpg" alt="New Arrival 2" class="img-responsive">
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
                    <div class="new-arrival-container">
                        <div class="new-arrival-overlay">
                            <h3 class="text-uppercase new-arrival-title">
                                <span class="font-script">Autumn</span>
                                <span class="smaller-text">Collection</span>
                            </h3>
                        </div>
                        <img src="img/new-arrival-3.jpg" alt="New Arrival 3" class="img-responsive">
                    </div>
                </div>
            </div>
        </section>
        <!--<section class="templatemo-gray-bg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h2 class="text-uppercase">Work Type</h2>
                        <hr class="templatemo-section-header-hr">
                        <p class="text-uppercase templatemo-section-subheader">View All Work</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-center">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="product-type-container">
                                    <div class="product-type-overlay">
                                        <div class="product-type-info pric">
                                            <p class="fa-2x gold-text" style="color: #f0f0f0" >css+js部分练习</p>
                                        </div>
                                    </div>
                                    <img src="img/product-type-1.jpg" alt="Product Type 1" class="product-type-img img-responsive">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="product-type-container">
                                    <div class="product-type-overlay">
                                        <div class="product-type-info pric" >
                                            <p class="fa-2x gold-text"  style="color: #f0f0f0">jQuery部分练习</p>
                                        </div>
                                    </div>
                                    <img src="img/product-type-2.jpg" alt="Product Type 2" class="product-type-img img-responsive">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="product-type-container">
                                    <div class="product-type-overlay">
                                        <div class="product-type-info pric">
                                            <p class="fa-2x gold-text" style="color: #f0f0f0" >自己找的小练习</p>
                                        </div>
                                    </div>
                                    <img src="img/product-type-3.jpg" alt="Product Type 3" class="product-type-img img-responsive">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="product-type-container">
                                    <div class="product-type-overlay">
                                        <div class="product-type-info pric" >
                                            <p class="fa-2x gold-text" style="color: #f0f0f0" >其他</p>
                                        </div>
                                    </div>
                                    <img src="img/product-type-4.jpg" alt="Product Type 4" class="product-type-img img-responsive">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" >
                        <div class="gold-border" style="height: 400px">
                            <div style="display: none">
                                <ul style="margin: 0;padding: 0; list-style: none">
                                    <li><a href="项目/lichunyan/index.html" target="blank">千图网</a></li>
                                    <li><a href="" target="blank">111</a></li>
                                    <li><a href="" target="blank"></a></li>
                                    <li><a href="" target="blank"></a></li>
                                    <li><a href="" target="blank"></a></li>
                                </ul>
                                <ul style="margin: 0;padding: 0; list-style: none">
                                    <li><a href="项目/jQuery选择器练习.html" target="_blank">jQuery选择器练习</a></li>
                                    <li><a href="项目/作业/01 - 订单/订单.html" target="blank">订单</a></li>
                                    <li><a href="项目/作业/02 - 选项卡/选项卡.html" target="blank">选项卡</a></li>
                                    <li><a href="项目/作业/03 - 下拉菜单/下拉菜单.html" target="blank">下拉菜单</a></li>
                                    <li><a href="项目/作业/04 - 模拟select/模拟select.html" target="blank">模拟select</a></li>
                                    <li><a href="项目/作业/01-鼠标停留显示遮罩层.html" target="blank">鼠标停留显示遮罩层</a></li>
                                    <li><a href="项目/作业/02-轮播图.html" target="blank">轮播图</a></li>
                                    <li><a href="项目/作业/04 - 星星评分、图片上传/五星好评.html" target="blank">五星评分jq</a></li>
                                    <li><a href="项目/作业/03-点击加号上传图片.html" target="blank">点击加号上传图片jq</a></li>
                                    <li><a href="项目/01 - 图片切换/图片切换.html" target="blank">图片切换</a></li>
                                    <li><a href="项目/02 - 图片翻转切换/图片翻转效果.html" target="blank">图片翻转效果</a></li>
                                    <li><a href="项目/03 - 置顶效果/置顶效果.html" target="blank">置顶效果</a></li>
                                    <li><a href="项目/04 - 检测用户输入字数（微博）/检测用户输入数字.html" target="blank">检测用户输入数字</a></li>
                                </ul>
                                <ul style="margin: 0;padding: 0; list-style: none">
                                    <li><a href="项目/lichunyan/index.html" target="blank">千图网</a></li>
                                    <li><a href="" target="blank">333</a></li>
                                    <li><a href="" target="blank"></a></li>
                                    <li><a href="" target="blank"></a></li>
                                    <li><a href="" target="blank"></a></li>
                                </ul>
                                <ul style="margin: 0;padding: 0; list-style: none">
                                    <li><a href="项目/lichunyan/index.html" target="blank">千图网</a></li>
                                    <li><a href="" target="blank">444</a></li>
                                    <li><a href="" target="blank"></a></li>
                                    <li><a href="" target="blank"></a></li>
                                    <li><a href="" target="blank"></a></li>
                                </ul>
                            </div>
                            <div class="product-type-message" id="cont">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>-->
        <footer class="text-center">
            <p class="text-uppercase">
            	Copyright &copy; BY LCY
            </p>
        </footer>
        <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>     
        <script type="text/javascript" src="js/templatemo-script.js"></script>      
        <script>
            $('.product-type-overlay .pric').each(function(index){
                   
                    $(this).attr('aa',index);
                    $(this).click(function(){
                    var re=$('.gold-border ul').eq($(this).attr('aa')*1).html();
                    $('#cont').addClass('on');
                    $('#cont').html(re);
                })
            })       
        </script>
    </body>
</html>
